<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>审批人设置</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="approval-setting">
      <div class="approval-setting-search">
        <el-form inline size="mini">
          <el-form-item label="审批人">
            <el-input v-model="search.name" placeholder="请输入审批人姓名" style="width:180px;"></el-input>
          </el-form-item>
          <el-form-item label="审批类型">
            <el-select filterable style="width:150px;" placeholder="请选择审批类型" v-model="search.project">
              <el-option v-for="type in approvalTypeList" :key="type.value" :label="type.label" :value="type.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getApprovalDataList(true)">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addDialogShow()">添加</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="approval-setting-table-div">
        <el-table fit stripe border :data="approvalDataList" style="width:100%" height="parent">
          <el-table-column prop="userName" label="审批人" width="100px" header-align="center"></el-table-column>
          <el-table-column label="审批类型" width="100px" align="center">
            <template slot-scope="scope">
              {{i18n.getMsg(`approvalSetting.approvalType.${scope.row.project}`)}}
            </template>
          </el-table-column>
          <el-table-column label="被审批人" min-width="120px" header-align="center">
            <template slot-scope="scope">
              <span>{{scope.row.approvalUserList.join(', ')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="操作" width="150px" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="updateDialogShow(scope.row)">修改</el-button>
              <el-button type="danger" size="mini" @click="deleteApproval(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top:5px;text-align:right" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount"
          :current-page.sync="pagination.currentPage" @current-change="pageChange">
        </el-pagination>
      </div>
    </div>

    <el-dialog title="添加审核类型" :visible.sync="addDialog" width="50%">
      <el-form :model="addParam" style="padding:0 10px;" size="mini" :inline="true">
        <el-form-item label="审核人">
          <el-select filterable style="width:150px;" placeholder="请选择审核人" v-model="addParam.name">
            <el-option v-for="user in userList" :key="user.key" :label="user.label" :value="user.key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审批类型">
          <el-select filterable style="width:150px;" placeholder="请选择审批类型" v-model="addParam.project">
            <el-option v-for="type in approvalTypeList" :key="type.value" :label="type.label" :value="type.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template v-if="addDialog">
        <el-transfer v-model="addParam.approvalUserIdList" :data="userList" filterable :filter-method="filterMethod"
          filter-placeholder="请输入员工姓名" :titles="['不被审核人', '被审核人']">
        </el-transfer>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="updateApproval" v-if="isUpdate">修 改</el-button>
        <el-button type="primary" @click="addApproval" v-if="!isUpdate">添 加</el-button>
      </span>
    </el-dialog>
  </div>

  <script src="myJs/importFile.js"></script>
  <script>
    importFile();
  </script>
  <script src="vueSystem/i18n/index.js"></script>
  <script src="vueSystem/components/sysCommonSearch.js"></script>

  <script type="text/javascript">
    var app = new Vue({
      el: "#app",
      data: function () {
        var search = {
          project: '',
          name: ''
        };
        return {
          search: _.cloneDeep(search),
          oldSearch: _.cloneDeep(search),
          addParam: {
            name: '',
            userName: '',
            project: '',
            approvalUserIdList: []
          },
          updateParam: {
            userName: '',
            project: ''
          },
          userList: [],
          approvalTypeList: [],
          approvalDataList: [], //审批设置数据
          loading: false,
          addDialog: false,
          isUpdate: false,
          i18n: i18n,
          pagination: {
            currentPage: 1,
            totalCount: 0,
            pageSize: 15
          }
        };
      },
      created: function () {
        this.loading = true;
        var self = this;
        Promise.all([
          this.getUserList(),
          this.getApprovalDataList(true),
          this.setApprovalTypeList()
        ]).then(function () {
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        })

      },
      methods: {
        setApprovalTypeList: function () {
          var self = this;
          return SysUtil.getUser().then(function (user) {
            var isPayUser = user.companyInfo.status === 1;
            var approvalCode;
            if (isPayUser) {
              approvalCode = ['1', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '15', '14',
                '16', '17'
              ];
            } else {
              approvalCode = ['4', '6', '10', '11', '12', '14'];
            }
            self.approvalTypeList = i18n.getDropDown('approvalSetting.approvalType', approvalCode);
            return user;
          });
        },
        filterMethod: function (query, item) {
          return item.label.indexOf(query) > -1;
        },
        deleteApproval: function (row) {
          var self = this;
          var sendDate = {
            updateName: row.name,
            updateProject: row.project
          }
          ajaxRequest("approval/delete", sendDate).then(function (res) {
            self.$message({
              showClose: true,
              message: res,
              type: 'success'
            });
            self.getApprovalDataList(false);
            self.addDialog = false;
          }).catch(function (error) {
            console.log(error);
          });
        },
        addApproval: function () {
          var self = this;
          var addParam = this.addParam;
          if (!this.checkParam(addParam)) {
            return false;
          }
          var sendDate = {
            addName: addParam.name,
            addProject: addParam.project,
            idArray: JSON.stringify(addParam.approvalUserIdList)
          }
          ajaxRequest("approval/addApperval", sendDate).then(function (res) {
            self.$message({
              showClose: true,
              message: res,
              type: 'success'
            });
            self.getApprovalDataList(false);
            self.addDialog = false;
          }).catch(function (error) {
            console.log(error);
          });
        },
        updateApproval: function () {
          var self = this;
          var addParam = this.addParam;
          var updateParam = this.updateParam;
          if (!this.checkParam(addParam)) {
            return false;
          }
          var sendDate = {
            addName: addParam.name,
            addProject: addParam.project,
            idArray: JSON.stringify(addParam.approvalUserIdList),
            updateName: updateParam.name,
            updateProject: updateParam.project
          }

          ajaxRequest("approval/updateApproval", sendDate).then(function (res) {
            self.$message({
              showClose: true,
              message: res,
              type: 'success'
            });
            self.getApprovalDataList(false);
            self.addDialog = false;
          }).catch(function (error) {
            console.log(error);
          });


        },
        checkParam: function (param) {
          var self = this;
          if (param.name == '') {
            self.$message({
              showClose: true,
              message: "请选择审核人",
              type: 'warning'
            });
            return false;
          }
          if (param.project == '') {
            self.$message({
              showClose: true,
              message: "请选择审核类型",
              type: 'warning'
            });
            return false;
          }
          if (param.approvalUserIdList.length <= 0) {
            self.$message({
              showClose: true,
              message: "请选择被审核人",
              type: 'warning'
            });
            return false;
          }
          return true;
        },
        updateDialogShow: function (row) {
          this.addDialog = true;
          this.addParam = _.cloneDeep(row);
          this.updateParam = _.cloneDeep(row);
          this.isUpdate = true;
        },
        //添加弹出框
        addDialogShow: function () {
          this.addDialog = true;
          this.addParam.userName = '';
          this.addParam.name = '';
          this.addParam.project = '';
          this.addParam.approvalUserIdList = [];
          this.isUpdate = false;
        },
        //设置物料集合
        getUserList: function () {
          var self = this;
          return ajaxRequest("user/queryAllUser", {
            "deptId": ''
          }).then(function (res) {
            var array = new Array();
            for (var i = 0; i < res.length; i++) {
              var one = new Object();
              one.key = res[i].id;
              one.label = res[i].userName;
              array.push(one);
            }
            self.userList = array;
            return array;
          });
        },
        getApprovalDataList: function (bool) {
          var self = this;
          var search = this.search;
          if (bool) {
            this.oldSearch = _.cloneDeep(search);
            this.pagination.currentPage = 1;
          }
          search.start = (this.pagination.currentPage - 1) * this.pagination.pageSize;
          search.length = this.pagination.pageSize;
          return ajaxRequest("approval/getApproval", search, false).then(function (res) {
            if (!bool) {
              self.search = _.cloneDeep(self.oldSearch);
            }
            self.pagination.totalCount = res.iTotalRecords;
            self.approvalDataList = res.returnData;
            return res.returnData;
          }).catch(function () {
            return [];
          });
        },
        pageChange: function () {
          this.getApprovalDataList(false);
        }
      }
    });
  </script>
</body>

<style>
  .approval-setting {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .approval-setting .approval-setting-search .el-form-item {
    margin-bottom: 10px;
  }

  .approval-setting .approval-setting-table-div {
    flex: 1;
    overflow: auto;
  }
</style>

</html>